<template>
    <div class="my-padding-10">
        <!--面包屑-->
        <el-row class="my-margin-top-10">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>统计分析</el-breadcrumb-item>
                <el-breadcrumb-item>课程统计</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <el-row class="my-margin-top-20" :gutter="10">
            <el-col :xl="2" :lg="3">
                <el-select v-model="chartType" size="small">
                    <el-option label="按月份统计" value="month"></el-option>
                    <el-option label="按年份统计" value="year"></el-option>
                </el-select>
            </el-col>

            <el-col :span="3">
                <el-date-picker style="width: 100%" size="small" v-if="chartType=='month'"
                    v-model="yearMonth"
                    type="month"
                    value-format="yyyy-MM"
                    :editable="editable"
                    placeholder="选择月">
                </el-date-picker>
                <el-date-picker style="width: 100%" size="small" v-if="chartType=='year'"
                                v-model="year"
                                type="year"
                                value-format="yyyy"
                                :editable="editable"
                                placeholder="选择年">
                </el-date-picker>
            </el-col>
            <el-col :xl="2" :lg="3">
                <el-select v-model="countType" size="small">
                    <el-option label="按次数统计" value="count"></el-option>
                    <el-option label="按人数统计" value="student"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" size="small" @click="clickQuery">确定</el-button>
            </el-col>
        </el-row>
        <el-row class="my-margin-top-10">
            <ve-line :data="chartData" :settings="chartSettings" :extend="extend" ></ve-line>
        </el-row>


    </div>

</template>

<script>
    import gradeJs from '@/utils/grade.js';
    export default {
        data(){
            let gradeList = gradeJs.getGradeList();
            let metrics = gradeList.map(item=>{return item.label})
            this.chartSettings = {
                metrics: metrics,
                dimension: ['日期'],
            };
            this.extend = {
                'xAxis.0.axisLabel.rotate': 45,
                'yAxis.0.minInterval': 1,
            };
            return {
                chartType: 'month',
                countType: 'count',
                year:'',
                yearMonth: '',
                editable: false,
                chartData: {
                    columns: ['日期', '一年级', '二年级', '三年级','四年级','五年级','六年级','七年级','八年级','九年级'],
                    rows: []
                },

            }
        },
        methods: {
            myConfig(option){
                console.log(option)
            },

            clickQuery(){
                if(this.chartType=='month' && this.yearMonth==''){
                    this.$notify.error({
                        title: '错误',
                        message: '还没有选择月份'
                    });
                    return;
                }
                if(this.chartType=='year' && this.year==''){
                    this.$notify.error({
                        title: '错误',
                        message: '还没有选择年'
                    });
                    return;
                }
                this.getChart();
            },
            //获取数据
            getChart(){
                let p = {};
                let url = '/chart/courseRecord';
                p.chartType = this.chartType;
                p.countType = this.countType;
                p.year = this.year;
                p.yearMonth = this.yearMonth;
                this.$http.fetch(url,p)
                    .then(res=>{
                        let data = res.data;
                        this.chartData.rows = data.map(item=>{
                            let vo = {};
                            vo['日期'] = item.time;
                            vo['一年级'] = item.grade1;
                            vo['二年级'] = item.grade2;
                            vo['三年级'] = item.grade3;
                            vo['四年级'] = item.grade4;
                            vo['五年级'] = item.grade5;
                            vo['六年级'] = item.grade6;
                            vo['七年级'] = item.grade7;
                            vo['八年级'] = item.grade8;
                            vo['九年级'] = item.grade9;
                            return vo;
                        })
                    })
            },
        },

        mounted(){
        }
    }
</script>
